<script setup lang='ts'>
import { SiderMenuEnum } from '@/models/@types';
import { appRef } from '@/models/app.ref';
import Explanation from '@/components/Explanation.vue'
import { onMounted, ref } from 'vue';
import { AIDrawMenuInfo, DrawModelEnumOpention } from '@/models/aidraw';
import { drawService } from '@/services/aidraw.service';
import { imageUrlToBase64 } from '@/utils/common.methods';
const menus = ref([]);
const currMenu = ref({} as AIDrawMenuInfo);
onMounted(() => {
  init();
})

async function init(): Promise<void> {
  menus.value = appRef.aidraw.menus;
  currMenu.value = appRef.aidraw?.currMenu;
}

function onAdd(e: { type: SiderMenuEnum, parent?: string }): void {
  const { type, parent } = e
  appRef.aidraw.add(type, parent);
  init();
}

function onItem(uid: string): void {
  console.log('onItem', uid);
  appRef.aidraw.setCurrKey(uid);
  init();
}
function onEdit(param: { uid: string, label: string }): void {
  const { uid, label } = param;
  appRef.aidraw.edit(uid, label);
}

const isSend = ref(false);

function onGenerate(): void {
  const { forward, exclude, model } = currMenu.value.image;
  isSend.value = true;
  drawService.generate(forward, exclude, model).then(() => {
    isSend.value = false;
  });
}

</script>
<template>
  <div class="index">
    <a-layout style="height: 100%;">
      <Sider :menus="menus" :default-uid="currMenu?.uid" @add="onAdd" @clear="() => { appRef.aidraw.clear(); init() }"
        @click-item="onItem" @edit="($event) => { onEdit($event); init() }"
        @remove="($event) => { appRef.aidraw.remove($event); init() }" />
      <a-layout>
        <div class="main flex-c" v-if="currMenu?.uid">
          <div class="content flex">
            <a-spin dot :loading="isSend" tip="疯狂绘制中 ...">
              <a-image class="image" v-if="currMenu.image?.img" :src="currMenu.image?.img">
                <template #loader>
                  <icon-loading />
                </template>
              </a-image>
            </a-spin>
          </div>
          <div class="prompt flex">
            <div class="left flex">
              <a-select v-model="currMenu.image.model" placeholder="请选择模型">
                <a-option v-for="item in DrawModelEnumOpention" :value="item.key" :label="item.name"></a-option>
              </a-select>
            </div>
            <div class="right flex-c">
              <a-button class="send" type="primary" :disabled="!currMenu.image.forward" @click.stop="onGenerate"
                :loading="isSend">
                <template #icon> <icon-send /> </template>
                <template #default>发送</template>
              </a-button>
            </div>
          </div>
          <div class="bottom flex">
            <a-textarea class="textarea" v-model="currMenu.image.forward" @keydown.ctrl.enter="onGenerate"
              placeholder="描述你想要的效果,如：1只穿着机械化装甲套装的布娃娃猫，透明头盔，Fluffy，使用爆炸火箭喷气背包飞行，太空舱中，爆炸背后是火花冒烟的火箭引擎，最佳画质，高分辨率，清晰对焦，高细节，电影阴影，侧光效果，动态模糊，电影灯光" :disabled="isSend" />
            <a-textarea class="textarea" v-model="currMenu.image.exclude" @keydown.ctrl.enter="onGenerate"
              placeholder="描述你不想要的效果，如：水印，带有水印的，文本，JPEG图像瑕疵，低质量，不安全内容，裸体，裸露，色情，最差质量，低质量，裁剪，超出画面，绘制不精细，解剖错误，额外的四肢，缺失肢体，漂浮的肢体，变异的手和手指，脱节的肢体，额外的腿，融合的手指，过多的手指，长颈鸟，变异，变异的，丑陋，恶心，截肢，模糊，签名" :disabled="isSend" />
          </div>

        </div>
        <Explanation v-else />
      </a-layout>
    </a-layout>
  </div>
</template>
<style lang='scss' scoped>
.index {
  height: 100%;

  .main {
    width: 95%;
    height: 100%;
    justify-content: center;
    max-width: 1270px;
    margin: 0 auto;
    padding: 20px 0;

    .content {
      width: calc(100% - 60px);
      margin: 30px;
      flex: 1;
      justify-content: center;
      box-shadow: 0 0 20px var(--color-border-3);
      border-radius: 10px;

      .image {

        img {
          width: 100%;
          object-fit: cover;
        }
      }
    }

    .prompt {
      width: 100%;
      margin: 30px 0 10px;
      justify-content: space-between;
      align-items: flex-end;

      .left {
        .item {
          margin: 0;
          margin-right: 5px;

          &:last-child {
            margin: 0;
          }
        }
      }

      .right {
        align-items: flex-end;

        .item {
          background: rgb(var(--primary-5));
          border-radius: 20px 20px 0 20px;
          height: 37px;
          margin-right: 5px;
          cursor: pointer;
          width: fit-content;
        }
      }
    }

    .bottom {
      width: 100%;
      height: 13%;

      .textarea {
        height: 100%;
        margin-right: 10px;

        &:last-child {
          margin: 0;
        }
      }


    }
  }
}
</style>